{extend name="main"}
{block name="style"}
<style type="text/css">
	.w-100px{width: 100px;}
	.w-200px{width: 200px;}
</style>
{/block}
{block name="body"}
<el-tabs v-model="activeName" class="bg-white px-3">
	<el-tab-pane label="套餐信息" name="basic"></el-tab-pane>
	<el-tab-pane label="价格" name="price"></el-tab-pane>
	<el-tab-pane label="增值服务折扣" name="value_added"></el-tab-pane>
	<el-tab-pane label="库存" name="stock"></el-tab-pane>
	<el-tab-pane label="规则" name="rule"></el-tab-pane>
	<el-tab-pane label="自动化" name="auto"></el-tab-pane>
</el-tabs>
<div class="bg-white p-3">
	<div class="table-responsive">
		<el-form :model="form" @submit.native.prevent="submitForm" :rules="rules" ref="form" label-width="140px" :label-position="labelPosition">

			<div v-show="activeName=='basic'">
			  <el-form-item label="名称" prop="title">
			    <el-input v-model="form.title" class="col-12 col-sm-3 pl-0 pr-0" placeholder="Title" maxlength="30" show-word-limit></el-input>
			  </el-form-item>

			  <el-form-item label="图标" prop="icon">
				  <el-image
				  	v-if="icon" 
				  	class="mw-200px mh-200px"
				    :src="icon" 
				    :preview-src-list="[icon]">
				  </el-image>
			  	  <el-upload
					  class="avatar-uploader"
					  action="/uploadFiles"
					  name="file"
					  accept="image/png"
					  :data="{path:'vip/icon'}"
					  :show-file-list="false"
					  :on-success="handleAvatarSuccess"
					  :on-error="handleAvatarError">
			  			<el-button size="small" type="primary">选择文件</el-button>
				  </el-upload>
			  </el-form-item>

			  <el-form-item label="套餐类型" prop="is_company">
			    <el-radio-group class="ml-0 ml-sm-2" v-model="form.is_company">
			      <el-radio :label="1">企业会员</el-radio>
			      <el-radio :label="0">个人会员</el-radio>
			    </el-radio-group>
			  </el-form-item>

			  <el-form-item label="状态" prop="status">
			    <el-radio-group class="ml-0 ml-sm-2" v-model="form.status">
			      <el-radio :label="1">上架[默认]</el-radio>
			      <el-radio :label="0">下架</el-radio>
			    </el-radio-group>
			  </el-form-item>

			  <el-form-item label="优先级" prop="level">
			    <el-input v-model="form.level" class="col-12 col-sm-1 pl-0 pr-0" placeholder="Level"></el-input>
			    <p class="small text-secondary mb-0">优先级倒序，3>2>1，最小为1，最大为999</p>
			  </el-form-item>

			</div>
			<div v-show="activeName=='price'">
			  <el-form-item label="售价" prop="price">
			    <el-input v-model="form.price" class="col-12 col-sm-1 pl-0 pr-0" placeholder="Price"></el-input>
			  </el-form-item>

			  <el-form-item label="折扣" prop="discount">
			    <el-input v-model.number="form.discount" class="col-12 col-sm-1 pl-0 pr-0" placeholder="Discount"></el-input>
			    <p class="small text-secondary mb-0">为0则不打折，范围：0-99</p>
			  </el-form-item>

			  <el-form-item label="现价">
		      	<div class="small text-secondary" v-if="form.discount">
		      		<div><s>原价：{{form.price}}</s></div>
		      		<div>折扣：{{(form.discount/10)}}折</div>
		      		<div>现价：{{(form.price*(form.discount/100)).toFixed(2)}}</div>
		      	</div>
		      	<div class="small text-secondary" v-else>
		      		<div><s>原价：{{form.price}}</s></div>
		      		<div>折扣：无</div>
		      		<div>现价：{{form.price}}</div>
		      	</div>
			  </el-form-item>
			</div>
			<div v-show="activeName=='value_added'">
			  <el-form-item label="默认折扣" prop="va_discount">
			    <el-input v-model="form.va_discount" class="col-12 col-sm-1 pl-0 pr-0" placeholder="Discount"></el-input>
			    <p class="small text-secondary mb-0">为0则不打折，范围：0-99</p>
			  </el-form-item>

			  <el-form-item v-for="(v,index) in form.va" :label="v.title+'折扣'" v-if="showVa(v)">
			    <el-input v-model.number="v.discount" class="col-12 col-sm-1 pl-0 pr-0" placeholder="Discount"></el-input>
			    <p class="small text-secondary mb-0">为0则不打折，范围：0-99</p>
		      	<div class="small text-secondary" v-if="v.discount>0">
		      		<div class="pb-2">折扣：{{(v.discount/10)}}折</div>
		      	</div>
		      	<div class="small text-secondary" v-else>
		      		<div class="pb-2">折扣：无</div>
		      	</div>
			  </el-form-item>
			</div>
			<div v-show="activeName=='stock'">
				<div v-if="is_edit">
				  <el-form-item label="取消库存限制" prop="cancel_stock">
  					<el-checkbox v-model="form.cancel_stock" :true-label="1" :false-label="0">{{form.cancel_stock?'取消库存限制':'不变'}}</el-checkbox>
				  </el-form-item>
				  <el-form-item label="追加库存" prop="add_stock">
				    <el-input v-model.number="form.add_stock" class="col-12 col-sm-1 pl-0 pr-0" placeholder="Stock"></el-input>
				  </el-form-item>
				  <el-form-item label="库存">
			      	<div class="small text-secondary" v-if="form.cancel_stock||(!form.cancel_stock && !form.stock && !form.add_stock)">
			      		<div>原库存：不限制</div>
			      	</div>
				  	<div v-else>
				      	<div class="small text-secondary" v-if="form.add_stock">
				      		<div>原库存：{{form.stock}}</div>
				      		<div>原剩余库存：{{form.surplus_stock}}</div>
				      		<div>追加：{{form.add_stock}}</div>
				      		<div>追加后库存：{{form.stock+form.add_stock}}</div>
				      		<div>追加后剩余库存：{{form.surplus_stock+form.add_stock}}</div>
				      	</div>
				      	<div class="small text-secondary" v-else>
				      		<div>原库存：{{form.stock}}</div>
				      		<div>原剩余库存：{{form.surplus_stock}}</div>
				      	</div>
				  	</div>
				  </el-form-item>
				</div>
				<div v-else>
				  <el-form-item label="库存" prop="stock">
				    <el-input v-model.number="form.stock" class="col-12 col-sm-1 pl-0 pr-0" placeholder="Stock"></el-input>
				    <p class="small text-secondary mb-0">为0则不限制</p>
				  </el-form-item>

				  <el-form-item label="剩余库存" prop="surplus_stock">
				    <el-input v-model.number="form.surplus_stock" class="col-12 col-sm-1 pl-0 pr-0" placeholder="Stock"></el-input>
				    <p class="small text-secondary mb-0">为空则自动计算</p>
				  </el-form-item>

				  <el-form-item label="已售" prop="sold">
				    <el-input v-model.number="form.sold" class="col-12 col-sm-1 pl-0 pr-0" placeholder="Sold"></el-input>
				    <p class="small text-secondary mb-0">为空则自动计算</p>
				  </el-form-item>
				</div>
			</div>
			<div v-show="activeName=='rule'">
			  <el-form-item v-if="form.rule.length>0" v-for="(v,index) in form.rule" 
			  :label="v.title" :prop="v.alias">
			    <el-input v-model="v.value" class="col-12 col-sm-2 pl-0 pr-0" placeholder="Stock" v-if="v.type==='input'">
			    	<template slot="append" v-if="v.unit">{{v.unit}}</template>
			    </el-input>
			    <el-switch
				  v-model="v.value"
				  active-color="#13ce66"
				  inactive-color="#6c757d"
				  :active-value="1"
				  :inactive-value="0"
				  v-else-if="v.type==='switch'">
				</el-switch>
			    <p class="small text-secondary mb-0">{{v.desc}}</p>
			  </el-form-item>
			  <p class="small text-secondary text-center py-5 mb-0" v-else>无可用规则，去<el-link href="/vip/rule" type="primary" :underline="false" style="vertical-align: baseline;">创建规则</el-link></p>

			</div>
			<div v-show="activeName=='auto'">
			  <el-form-item label="发布时间" prop="start_time">
			    <el-date-picker
			      v-model="form.start_time"
			      align="right"
			      type="date"
			      format="yyyy-M-d"
			      value-format="yyyy-M-d"
			      placeholder="选择日期">
			    </el-date-picker>
				<p class="small text-secondary mb-0">到发布时间后未上架状态会自动变更为已上架</p>
			  </el-form-item>

			  <el-form-item label="结束时间" prop="end_time">
			    <el-date-picker
			      v-model="form.end_time"
			      align="right"
			      type="date"
			      placeholder="选择日期"
			      format="yyyy-M-d"
			      value-format="yyyy-M-d">
			    </el-date-picker>
				<p class="small text-secondary mb-0">到结束时间后已上架状态会自动变更为已上架</p>
				<p class="small text-secondary mb-0">不设置结束时间则不会自动下架</p>
			  </el-form-item>
			</div>

		  <el-form-item>
		    <el-button type="primary" @click="submitForm('form')">立即保存</el-button>
		    <el-button @click="resetForm('form')">重置</el-button>
		  </el-form-item>
		</el-form>
	</div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
	{empty name="VipValueAdded"}
	var va=[];
	{else/}
	var va={:json_encode($VipValueAdded,JSON_UNESCAPED_UNICODE)};
	{/empty}
	{empty name="VipRuleValue"}
	var vip_rule_value=[];
	{else/}
	var vip_rule_value={:json_encode($VipRuleValue,JSON_UNESCAPED_UNICODE)};
	{/empty}
	{empty name="Find"}
	var url='/vip/add';
	var is_edit=false;
	var formData={
				title:'',
				icon:'',
				is_company:1,
				status:1,
				level:1,
				price:'',
				discount:'',
				va_discount:'',
				stock:0,
				surplus_stock:'',
				add_stock:'',
				sold:'',
				start_time:'',
				end_time:'',
				rule:vip_rule_value,
				va:va
			};
	var icon='';
	{else/}
	var url='/vip/edit/{$Find.id}';
	var is_edit=true;
	var formData={:json_encode($Find,JSON_UNESCAPED_UNICODE)};
	var icon='';
	if (formData.icon)
		icon='{:config('web.imgurl')}'+formData.icon;
	{/empty}
</script>
<script type="text/javascript">
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			labelPosition:'right',
			activeName:'basic',
			vip_rule_value:vip_rule_value,
			icon:icon,
			form:formData,
			is_edit:is_edit,
	        rules: {
	          title: [
	            { required: true, message: '请输入套餐名称', trigger: 'blur' },
	          ],
	          is_company: [
	            { required: true, message: '请选择套餐类型', trigger: 'blur' },
	          ],
	          status: [
	            { required: true, message: '请选择套餐状态', trigger: 'blur' },
	          ],
	          level: [
	            { required: true, message: '请输入优先级', trigger: 'blur' },
	          ],
	          price: [
	            { required: true, message: '请输入售价', trigger: 'blur' },
	          ],
	          discount: [
	            { required: true, message: '请输入折扣', trigger: 'blur' },
	          ],
	          va_discount: [
	            { required: true, message: '请输入增值服务折扣', trigger: 'blur' },
	          ],
	          stock: [
	            { required: true, message: '请输入库存', trigger: 'blur' },
	          ],
	        }
		},
		watch:{
		    view:XYBase.viewWatch,
		},
		created(){
			XYBase.created(this);
		},
		methods:{
			showVa(val){
				return val.is_company==this.form.is_company;
			},
			handleAvatarSuccess:function(res, file) {
				if(res){
					if(res.code === 0){
						if(res.data.type == 'vip/icon'){
							this.form.icon=res.data.path;
							this.icon=res.data.url;
						}
						XYBase.success(res.msg);
					}else{XYBase.error(res.msg);}
				}else{XYBase.error(XYBase.config.system_network_error)}
			},
			handleAvatarError:function(res, file) {
	          	XYBase.error(XYBase.config.system_network_error)
			},
			updateFormData(){
				var _this=this;
				$.getJSON(url,function(ret){
					if (ret){
						if (ret.code === 0) {
							_this.form=ret.data;
							return;
						}
					}
					window.location.reload();
				})
			},
			submitForm:function(formName) {
				var _this=this;
				var D=_this.form;
				_this.$refs[formName].validate((valid) => {
				  if (valid) {
					const loading = XYBase.openloading();
					$.ajax({
						url:url,
						data:D,
						type:'post',
						dataType:'json',
						success:function(ret){
					        loading.close();
					        if (ret) {
								if(ret.code == 0){
									XYBase.success(ret.msg);
									if(!_this.is_edit){
										_this.resetForm(formName);
									}else{
										_this.updateFormData();
									}
								}else{
									XYBase.msg(ret.msg);
								}
					        }else{
				          		XYBase.error(XYBase.config.system_network_error)
					        }
						},
						error:function(err){
					        loading.close();
				          	XYBase.error(XYBase.config.system_network_error)
						}
					});
				  } else {
					XYBase.warning('请先把表单填写完整。');
				    return false;
				  }
				});
			},
			resetForm:function(formName) {
				this.icon=icon;
				this.$refs[formName].resetFields();
			},
		}
	});
$(function(){
	reloadWindowSize();
	$(window).resize(function(){
		reloadWindowSize();
	});
});
function reloadWindowSize (argument) {
	var winW=$(window).width();
	if(winW <= 576){
		vm.labelPosition='top';
	}else{
		vm.labelPosition='right';
	}
}
</script>
{/block}